import { Routes, Route, Link } from "react-router-dom"
import Discover from "./Discover"
import Friend from "./Friend"
import Mine from "./Mine"
import Page404 from "./Page404"
import Playlist from "./Discover/Playlist"
import Toplist from "./Discover/Toplist"
// react路由支持声明式,只需要通过Route就能配置出路由了

//routes只能嵌套route

//Link是导航组件 用于跳转路由 必须传递属性 to
let Basic = () => {
    return (
        <fieldset>
            <legend>Basic</legend>
            <h1>Basic</h1>
            <Link to="/friend/123">朋友</Link>
            <br />
            <Link to="/discover">发现</Link>
            <br />
            <Link to="/mine">个人中心</Link>
            <Routes>
                <Route path="*" element={<Page404 />} />
                <Route path="/discover" element={<Discover />}>
                    <Route path="playlist" element={<Playlist />} />
                    <Route path="toplist" element={<Toplist />} />
                </Route>
                <Route path="/friend/:name/:id" element={<Friend />} />
                <Route path="/mine" element={<Mine />} />
            </Routes>
        </fieldset>
    )
}

export default Basic